<template>
  <div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="msg"
          label="公告面板"
          width="2100">
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 20px 0;"></div>
    <div>
      <el-table
        :data="tableData1"
        border
        style="width: 100%"
        max-height="800">
        <el-table-column
          prop="id"
          label="ID"
          width="120">
        </el-table-column>
        <el-table-column
          prop="msg"
          label="内容"
          width="2000">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData1)"
              type="text"
              size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin: 20px 0;"></div>
    <el-input
      style="max-width: 900px"
      type="textarea"
      autosize
      placeholder="请输入内容"
      v-model="textarea1">
    </el-input>
    <div style="margin: 20px 0;"></div>
    <el-button type="primary" @click="updateText">更新面板</el-button>
    <el-button type="success" @click="pushText">添加公告</el-button>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    created() {
      axios.get("/noticemsg").then(resp => {
        if (resp.data.result) {
          this.tableData = resp.data.msg
        }
      });
      axios.get("/systemnoticemsg").then(resp => {
        if (resp.data.result) {
          this.tableData1 = resp.data.msg
        }
      });
    },
    methods: {
      deleteRow(index, rows) {
        axios.get("/deletesystemnoticemsg", {
          params: {
            id: rows[index].id
          }
        }).then(resp => {
          this.tableData1 = resp.data.msg
          this.$notify({
            title: '成功',
            message: rows[index].id,
            type: 'success'
          });
          rows.splice(index, 1);
          this.textarea1 = ''
        }).catch(err => {

        })
        rows.splice(index, 1);
      },
      updateText() {
        axios.get("/setnoticemsg", {
          params: {
            content: this.textarea1
          }
        }).then(resp => {
          this.tableData = resp.data.msg
          this.$notify({
            title: '成功',
            message: this.textarea1,
            type: 'success'
          });
          this.textarea1 = ''
        }).catch(err => {

        })
      },
      pushText(){
        axios.get("/setsystemnoticemsg", {
          params: {
            content: this.textarea1
          }
        }).then(resp => {
          this.tableData1 = resp.data.msg
          this.$notify({
            title: '成功',
            message: this.textarea1,
            type: 'success'
          });
          this.textarea1 = ''
        }).catch(err => {

        })
      }
    },
    data() {
      return {
        textarea1: '',
        tableData: [{msg: '哈哈哈哈哈哈哈'}],
        tableData1: [{
          msg: '上海市普陀区金沙江路 1518 弄',
          id: 200333
        }, {
          msg: '普陀区',
          id: 200333
        }],
        id: '',
        msg: ''
      }
    }
  }
</script>

<style scoped>

</style>
